/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-07-27 17:20:31
 * @LastEditTime : 2023-07-28 13:36:47
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Assets\Template\FileDistribution.jsx
 * @Description  :
 */
import './Scss/FileDistribution.scss'
import { TitleSmall002 } from '../Common/SmallTitle'
import { useRequest, useSize } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect, useRef, useState } from 'react'
import { Column } from '@ant-design/plots'
import { FrontModalBox, GetAttData } from '../Modal'
import { ModalBox } from '../../../../Common/Modal/ModalBox'

export const FileDistribution001 = () => {
    const BoxRef = useRef()
    const size = useSize(BoxRef)
    const [DataOne, setDataOne] = useState()
    const [DataTwo, setDataTwo] = useState()

    const { runAsync: getOne } = useRequest(Http, {
        manual: true,
        onSuccess: res => setDataOne(res.list),
    })
    const { runAsync: getTwo } = useRequest(Http, {
        manual: true,
        onSuccess: res => setDataTwo(res.list),
    })

    const [OptionsCall, setOptionsCall] = useState()
    const [FrontOptionsCall, setFrontOptionsCall] = useState()

    const config = (size, data) => {
        const { height } = size
        return {
            data,
            autoFit: false,
            height: height - 48,
            maxColumnWidth: 14,
            appendPadding: 24,
            xField: 'eventDate',
            yField: 'formCount',
            color: 'l(90) 0:rgba(255, 246, 177, 1) 1:rgba(255, 246, 177, 0.2)',
            xAxis: {
                label: { style: { fill: '#B2FBFD' } },
                line: { style: { stroke: '#B2FBFD' } },
                tickLine: { style: { stroke: '#B2FBFD' } },
            },
            yAxis: {
                title: { text: '', position: 'end', autoRotate: false, offset: 50, style: { fill: '#B2FBFD' } },
                tickCount: 5,
                label: { style: { fill: '#B2FBFD' } },
                grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
            },
            meta: {
                eventDate: { alias: '类别' },
                formCount: { alias: '数量' },
            },
        }
    }

    useEffect(() => {
        getOne({ url: 'getHomeFormInfo', data: { FCount: 20 } })
        getTwo({ url: 'getHomeFormInfoByYearMonth' })
    }, [getOne, getTwo])

    const OpenAnnex = async uuid => setOptionsCall(await GetAttData(uuid, 1))

    return (
        <div className="FileDistribution001" ref={BoxRef}>
            <div className="Left">
                <TitleSmall002 title="通知公告" />
                {size && DataOne && (
                    <div className="DataOne" style={{ height: size.height - 48 }}>
                        {DataOne.map(({ uuid, tableName, eventDate }) => (
                            <div key={uuid} onClick={() => OpenAnnex(uuid)}>
                                {tableName} {eventDate}
                            </div>
                        ))}
                    </div>
                )}
            </div>
            <ModalBox OptionsCall={OptionsCall} />
            <div className="Right">
                <TitleSmall002 title="按月统计" />
                {size && DataTwo && (
                    <div className="DataTwo">
                        <Column
                            {...config(size, DataTwo)}
                            onReady={plot =>
                                plot.on('plot:click', e => {
                                    setFrontOptionsCall({
                                        type: 'TableList',
                                        data: {
                                            title: '审批详情',
                                            type: 'DocumentApproval',
                                        },
                                    })
                                })
                            }
                        />
                    </div>
                )}
            </div>

            <FrontModalBox OptionsCall={FrontOptionsCall} />
        </div>
    )
}
